<template>
    <div>
        <el-container>
            <el-header height="10vh">
                <HomeMain></HomeMain>
            </el-header>
            <el-container>
                <el-aside width="18vw">
                    <HomeAside></HomeAside>
                </el-aside>
                <el-main>
                    <div v-if="show">
                        <homeCurrent></homeCurrent>
                    </div>
                    <router-view v-else></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import HomeMain from '@c/HomeMain.vue';
import HomeAside from "@/components/HomeAside.vue"
import homeCurrent from "@/components/HomeCurrent"
export default {
    data(){
        return{
            show:false,
        }
    },
    methods:{
        showHome(value){
            if(value.path === "/home"){
                this.show = true;

            }else{
                this.show=false
            }
        }
    },
    mounted(){
        this.showHome(this.$route);
    },
    components:{
        HomeMain,
        HomeAside,
        homeCurrent
    },
    watch:{
        $route(value){
            this.showHome(value);
        }
    }
}
</script>

<style lang="scss" scoped>
div {
    .el-header {
        background-color:#535B63;
        color: #fff;
    }

    .el-aside {
        background-color: #B3C0D1;
        color: #fff;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }
}
</style>